<SelectControl
    label="{__('describe / locale-select / language')}"
    options="{options}"
    width="200px"
    labelWidth="80px"
    bind:value="$language"
/>

<script>
    import SelectControl from '../SelectControl.html';
    import { __ } from '@datawrapper/shared/l10n';

    export default {
        components: { SelectControl },
        computed: {
            options({ $locales }) {
                return $locales.map(t => {
                    return {
                        value: t.value,
                        label: `${t.label} (${t.value})`
                    };
                });
            }
        },
        helpers: { __ },
        onstate() {
            const { language } = this.store.get();

            // ensure correct formatting is saved (eg "en-US" and not "en_US")
            if (language) {
                this.store.set({ language: language.replace('_', '-') });
            }
        }
    };
</script>
